<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />  
<meta http-equiv="Pragma" content="no-cache" />  
<meta http-equiv="Expires" content="0" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>查找经销商</title>
<link rel="stylesheet" href="http://i-club.gmmc.com.cn/fs01/assets/v1/components/bootstrap/dist/css/bootstrap.min.css">  
    <link rel="stylesheet" href="http://i-club.gmmc.com.cn/fs01/assets/v1/components/bootstrapValidator/css/bootstrapValidator.css" type="text/css" />
	<script type="text/javascript" src="http://i-club.gmmc.com.cn/fs01/assets/v1/components/jquery2.1.1/jquery.min.js"></script>
	<script type="text/javascript" src="http://i-club.gmmc.com.cn/fs01/assets/v1/js/common/py.js"></script>
	<script type="text/javascript" src="http://i-club.gmmc.com.cn/fs01/assets/v1/components/bootstrap/dist/js/bootstrap.min.js"></script>
	
	<script type="text/javascript" src="http://i-club.gmmc.com.cn/fs01/assets/v1/components/hammer/hammer.min.js"></script>
	<script type="text/javascript" src="http://i-club.gmmc.com.cn/fs01/assets/v1/components/hammer/jquery.hammer.js"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=6WLRtwjdIPrXW5FaNIsgdZG038pLb84Z"></script>

    <script src="http://i-club.gmmc.com.cn/fs01/assets/v1/components/bootstrapValidator/js/bootstrapValidator.js"></script>
    <script type="text/javascript" src="http://i-club.gmmc.com.cn/fs01/assets/v1/js/common/common.js"></script>
	
		
	<script type="text/javascript" src="http://i-club.gmmc.com.cn/fs01/assets/v1/js/common/wechatCommon.js"></script>
	<script type="text/javascript" src="http://i-club.gmmc.com.cn/fs01/assets/v1/js/sd.js"></script>
<link href="http://i-club.gmmc.com.cn/fs01/assets/v1/js/homepage/style2.css" rel="stylesheet">
<style> 
.product-head h1{font-size: 14px;font-family: Arial, Helvetica, sans-serif;margin-bottom: 3px;margin-left: 3px;}
.product-head{font-size: 12px;padding: 4px;background-color: #ccc;width: 235px;}
.filterform input{font-size: 15px;padding: 3px;border: 1px solid #999;}
li{padding: 0;margin: 3px;list-style: none;width: 100%;}
li a{color: #000;font-family: Arial, Helvetica, sans-serif;font-size: 11px}
ul{margin: 0;padding: 0;}
.clear{clear: both;}
body{background-color:#f6f6f6;}
a{ text-decoration:none;color:#000;}
</style>
</head>
<body>
	<input class="hidden" id="dealerCode" name="dealerCode" value="">
	<!-- 定位 -->
	<input class="hidden" id="regionName" name="regionName" value="">
	<input class="hidden" id="latitude" name="latitude" value="">
	<input class="hidden" id="longitude" name="longitude" value="">
<div id="allmap"></div>
	<script type="text/javascript">
		$("#allmap").hide();
		var map = new BMap.Map("allmap");
		var point = new BMap.Point(116.709684, 39.89778);
		map.centerAndZoom(point, 16);
		map.enableScrollWheelZoom();

		var myIcon = new BMap.Icon("myicon.png", new BMap.Size(30, 30), {
			anchor : new BMap.Size(10, 10)
		});

		var marker = new BMap.Marker(point, {
			icon : myIcon
		});
		map.addOverlay(marker);

		var geolocation = new BMap.Geolocation();
		geolocation.getCurrentPosition(function(r) {
			if (this.getStatus() == BMAP_STATUS_SUCCESS) {
				var mk = new BMap.Marker(r.point);
				map.addOverlay(mk);
				//map.panTo(r.point);//地图中心点移到当前位置
				var latCurrent = r.point.lat;
				var lngCurrent = r.point.lng;
				//alert('我的位置：' + latCurrent + ',' + lngCurrent);
				$("#latitude").val(latCurrent);
				$("#longitude").val(lngCurrent);
				//根据经纬度查城市名
				getAddress(lngCurrent, latCurrent);
				//location.href="http://api.map.baidu.com/direction?origin="+latCurrent+","+lngCurrent+"&destination=39.89778,116.709684&mode=driving&region=北京&output=html";

			} else {
				//alert('failed' + this.getStatus());
			}
		}, {
			enableHighAccuracy : true
		})

		map.addOverlay(marker);
		var licontent = "";
		var opts = {
			width : 200,
			height : 80,
		};
		var infoWindow = new BMap.InfoWindow(licontent, opts);
		marker.openInfoWindow(infoWindow);
		marker.addEventListener('click', function() {
			marker.openInfoWindow(infoWindow);
		});

		function getAddress(longitude, latitude) {

			var address;

			//通过baiduMap API获取街道名称
			var map = new BMap.Map("allmap");
			var point = new BMap.Point(longitude, latitude);
			var gc = new BMap.Geocoder();

			gc.getLocation(point, function(rs) {

				var addComp = rs.addressComponents;

				address = addComp.province + ", " + addComp.city + ", "
						+ addComp.district + ", " + addComp.street + ", "
						+ addComp.streetNumber;

				//alert(addComp.city);
				$("#sou").attr('placeholder',"当前城市为："+addComp.city);
				$("#regionName").val(addComp.city);
			});
			return address;
		}
	</script>
<!-- 定位当前城市经销商-经销商选择二级页面 -->
<div id="nowDealerDiv" class="tab-pane">
<script>
	//距离近-距离远
	function near(){
    	var aDiv = document.getElementsByTagName('li');
    	var oUl = document.getElementById("dealerDiv");  
    	var arr = [];
    	for(var i=0;i<aDiv.length;i++)
    	{
       		 arr.push(aDiv[i]);  //aDiv是元素的集合，并不是数组，所以不能直接用数组的sort进行排序。
   		 }
    	arr.sort(function(a,b){return a.getAttribute('data-id') - b.getAttribute('data-id')});
    	for(var i=0;i<arr.length;i++)
    	{
    		oUl.appendChild(arr[i]); //将排好序的元素，重新塞到body里面显示。
    	}
	}
	//距离远-距离近
	function far(){
    	var aDiv = document.getElementsByTagName('li');
    	var oUl = document.getElementById("dealerDiv");  
    	var arr = [];
    	for(var i=0;i<aDiv.length;i++)
    	{
       		 arr.push(aDiv[i]);  //aDiv是元素的集合，并不是数组，所以不能直接用数组的sort进行排序。
   		 }
    	arr.sort(function(a,b){return b.getAttribute('data-id') - a.getAttribute('data-id')});
    	for(var i=0;i<arr.length;i++)
    	{
    		oUl.appendChild(arr[i]); //将排好序的元素，重新塞到body里面显示。
    	}
	}
</script>
		<img src="http://i-club.gmmc.com.cn/fs01/assets/v1/images/GQ/d2.png" style="width: 100%;"
			onclick="selectMaintainDealer(this)">
		<form class="filterform" action="#">
			<div>
				<br>
				<input id="sou" class="filterinput form-control" type="text"
					placeholder="搜索"
					style="width: 80%; margin: 0 auto; font-size: 16px;">
			</div>

			<div class="dropdown">
				<button type="button" class="btn dropdown-toggle" id="dropdownMenu1"
					data-toggle="dropdown"
					style="background-color: #f6f6f6; font-size: 16px;">
					距离 <span class="caret"></span>
				</button>
				<ul style="text-align: center;" id="distance" class="dropdown-menu"
					role="menu" aria-labelledby="dropdownMenu1">

					<a role="presentation" tabindex="-1" onclick="near()"
						style="font-size: 16px;"><span>由近到远</span></a>
					<br>
					<a role="presentation" tabindex="-1" onclick="far()"
						style="font-size: 16px;"><span>由远到近</span></a>

				</ul>
			</div>
			<div id="searchDealer"></div>
			
			<ul id="list2">
				<li id="KmFirst" data-id="KmFirst">
					<div class="panel panel-default">
						<table style="width: 100%" class="table-condensed">
							<tbody>
								<tr>
									<td style="width: 160px; text-align: left;"><a
										onclick="sureDealer(-1)">
											<p id="nameFirst"
												style="font-family: 黑体; font-size: 16px; color: #000000"></p>
											<p class="hidden" id="shortNameFirst"></p>
												
									</a></td>
									<td
										style="width: 100px; text-align: center; font-size: 14px; color: #7a7a7a">
										<span>距离：</span><span id="distanceFirst"></span>
									</td>
								</tr>
								<tr>
									<td style="width: 160px; text-align: left;"><span
										id="addrFirst"
										style="font-faminly: 宋体; font-size: 15px; color: #615f5f"></span><br>
										<span id="remarkFirst"
										style="font-faminly: 宋体; font-size: 14px; color: #7a7a7a"></span>
									</td>
									<td style="width: 100px; text-align: center; color: #7a7a7a">
										<a href="" id="Tel"> <span
											class="glyphicon glyphicon-earphone"
											style="color: rgb(255, 0, 23); font-size: 12px;"></span> <span
											style="font-family: 宋体; font-size: 14px; color: #7a7a7a">
												电话</span>
									</a>
									</td>
								</tr>
							</tbody>
						</table>
						<input id="codeFirst" class="hidden" value="">
					</div>
				</li>

				<div id="dealerDiv" class=""></div>
			</ul>
	</div>
	<!-- 经销商选择-三级页面 -->
	<div id="maintainDealerDiv" class="tab-pane fade">
		<img src="http://i-club.gmmc.com.cn/fs01/assets/v1/images/GQ/d1.png" style="width: 100%;">
		<form class="filterform" action="#">
			<div>
				<br> <input id="cha" class="filterinput form-control"
					type="text" placeholder="搜索" style="width: 80%; margin: 0 auto;">
			</div>
			<div id="searchCity"></div>
			<div id="dealerMap" class="container">
									<ul id="list1">
						<h3>A</h3>
						<div id="a" style="background-color: #fff"></div>
						<h3>B</h3>
						<div id="b" style="background-color: #fff"></div>
						<h3>C</h3>
						<div id="c" style="background-color: #fff"></div>
						<h3>D</h3>
						<div id="d" style="background-color: #fff"></div>
						<h3>E</h3>
						<div id="e" style="background-color: #fff"></div>
						<h3>F</h3>
						<div id="f" style="background-color: #fff"></div>
						<h3>G</h3>
						<div id="g" style="background-color: #fff"></div>
						<h3>H</h3>
						<div id="h" style="background-color: #fff"></div>
						<h3>I</h3>
						<div id="i" style="background-color: #fff"></div>
						<h3>J</h3>
						<div id="j" style="background-color: #fff"></div>
						<h3>K</h3>
						<div id="k" style="background-color: #fff"></div>
						<h3>L</h3>
						<div id="l" style="background-color: #fff"></div>
						<h3>M</h3>
						<div id="m" style="background-color: #fff"></div>
						<h3>N</h3>
						<div id="n" style="background-color: #fff"></div>
						<h3>O</h3>
						<div id="o" style="background-color: #fff"></div>
						<h3>P</h3>
						<div id="p" style="background-color: #fff"></div>
						<h3>Q</h3>
						<div id="q" style="background-color: #fff"></div>
						<h3>R</h3>
						<div id="r" style="background-color: #fff"></div>
						<h3>S</h3>
						<div id="s" style="background-color: #fff"></div>
						<h3>T</h3>
						<div id="t" style="background-color: #fff"></div>
						<h3>U</h3>
						<div id="u" style="background-color: #fff"></div>
						<h3>V</h3>
						<div id="v" style="background-color: #fff"></div>
						<h3>W</h3>
						<div id="w" style="background-color: #fff"></div>
						<h3>X</h3>
						<div id="x" style="background-color: #fff"></div>
						<h3>Y</h3>
						<div id="y" style="background-color: #fff"></div>
						<h3>Z</h3>
						<div id="z" style="background-color: #fff"></div>
					</ul>
			</div>
	</div>
	

</body>
</html>